<template>
  <v-chart
    :forceFit="true"
    :height="height"
    :background="{ fill: '#fff' }"
    :padding="[10,20,50,20]"
    :data="data"
    :scale="scale"
    :animate="false"
  >
    <v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
    <v-axis
      dataKey="value"
      :zIndex="2"
      :line="null"
      :label="axisLabel"
      :subTickCount="4"
      :subTickLine="axisSubTickLine"
      :tickLine="axisTickLine"
      :grid="null"
    ></v-axis>
    <v-axis dataKey="1" :show="false"></v-axis>
    <v-series
      gemo="point"
      position="value*1"
      shape="pointer"
      color="#8C8C8C"
      :active="false"
    ></v-series>
    <v-guide
      type="arc"
      :zIndex="0"
      :top="false"
      :start="arcGuideBgStart"
      :end="arcGuideBgEnd"
      :vStyle="arcGuideBgStyle"></v-guide>
    <v-guide type="arc" v-bind="arcGuideLowProps"></v-guide>
    <v-guide type="arc" v-bind="arcGuideMidProps"></v-guide>
    <v-guide type="arc" v-bind="arcGuideHighProps"></v-guide>
    <v-guide type="html" v-bind="htmlGuideProps"></v-guide>
  </v-chart>
</template>

<script>
import { registerShape } from 'viser-vue'

registerShape('point', 'pointer', {
  draw (cfg, container) {
    let point = cfg.points[0] // 获取第一个标记点
    point = this.parsePoint(point)
    const center = this.parsePoint({ // 获取极坐标系下画布中心点
      x: 0,
      y: 0
    })
    // 绘制指针
    container.addShape('line', {
      attrs: {
        x1: center.x,
        y1: center.y,
        x2: point.x,
        y2: point.y,
        stroke: cfg.color,
        lineWidth: 2,
        lineCap: 'round'
      }
    })
    return container.addShape('circle', {
      attrs: {
        x: center.x,
        y: center.y,
        r: 4.75,
        stroke: cfg.color,
        lineWidth: 2.5,
        fill: '#fff'
      }
    })
  }
})

const color = ['#f2637b', '#fbd437', '#0088fe']

export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    label: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 221
    }
  },
  data () {
    return {
      scale: [{
        dataKey: 'value',
        min: 0,
        max: 100,
        tickInterval: 10,
        nice: false
      }],
      axisLabel: {
        offset: -10,
        textStyle: {
          fontSize: 12,
          textAlign: 'center',
          textBaseline: 'middle'
        }
      },
      axisSubTickLine: {
        length: -8,
        stroke: '#fff',
        strokeOpacity: 1
      },
      axisTickLine: {
        length: -8,
        stroke: '#fff',
        strokeOpacity: 1
      },

      arcGuideBgStart: [0, 0.945],
      arcGuideBgEnd: [100, 0.945],
      arcGuideBgStyle: {
        stroke: '#CBCBCB',
        lineWidth: 10
      }
    }
  },
  computed: {
    data () {
      return [{ value: this.value }]
    },
    htmlGuideProps () {
      const { value, label } = this
      const text = (label ? (label + ':') : '') + value
      let comment, textColor
      if (value < 60) {
        comment = '不合格'
        textColor = color[0]
      } else if (value < 80) {
        comment = '合格'
        textColor = color[1]
      } else {
        comment = '优秀'
        textColor = color[2]
      }
      return {
        position: ['50%', '100%'],
        html: `
          <div style="text-align: center;">
            <p style="font-size: 14px;color: ${textColor};margin: 0; font-weight:bold">${comment}</p>
            <p style="font-size: 16px;color: #545454;margin: 0;">${text}</p>
          </div>
        `
      }
    },
    arcGuideLowProps () {
      return {
        zIndex: 1,
        start: [0, 0.945],
        end: [Math.max(0, Math.min(60, this.value)), 0.945],
        vStyle: {
          stroke: color[0],
          lineWidth: 10
        }
      }
    },
    arcGuideMidProps () {
      return {
        zIndex: 1,
        start: [60, 0.945],
        end: [Math.max(60, Math.min(80, this.value)), 0.945],
        vStyle: {
          stroke: color[1],
          lineWidth: 10
        }
      }
    },
    arcGuideHighProps () {
      return {
        zIndex: 1,
        start: [80, 0.945],
        end: [Math.max(80, Math.min(100, this.value)), 0.945],
        vStyle: {
          stroke: color[2],
          lineWidth: 10
        }
      }
    }
  }
}
</script>
